<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rich Text HTML Extractor</title>
  <style>
  * {
    box-sizing: border-box;
  }
  
  body {
    font-family: Helvetica, Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  h1, h2 {
    font-weight: 500;
  }
  
  #paste-area {
    width: 100%;
    height: 150px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f5f5f5;
    font-size: 16px;
    font-family: Helvetica, Arial, sans-serif;
    overflow: auto;
  }
  
  #output-container {
    display: none;
  }
  
  #html-output {
    width: 100%;
    height: 250px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    font-size: 16px;
    font-family: monospace;
    white-space: pre-wrap;
    overflow-x: auto;
  }
  
  #preview-container {
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 15px;
    background-color: #fff;
  }
  
  .button {
    padding: 8px 15px;
    cursor: pointer;
    background-color: #4285f4;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    margin-right: 10px;
    transition: background-color 0.2s;
  }
  
  .button:hover {
    background-color: #3367d6;
  }
  
  .info-text {
    color: #666;
    font-style: italic;
    margin-bottom: 10px;
  }
  
  @media (max-width: 600px) {
    body {
      padding: 10px;
    }
    
    #paste-area, #html-output {
      height: 180px;
    }
  }
  </style>
</head>
<body>
  <h1>Rich text HTML extractor</h1>
  <p>Copy formatted text from a webpage and paste here to extract the HTML:</p>
  
  <div id="paste-area" contenteditable="true"></div>
  <p class="info-text">Paste using Ctrl+V or ⌘+V to capture the rich text HTML.</p>
  
  <div id="output-container">
    <h2>HTML code</h2>
    <textarea id="html-output" readonly></textarea>
    
    <button id="copy-button" class="button">Copy HTML</button>
    <button id="clear-button" class="button">Clear all</button>
    
    <div id="preview-container">
      <h2>Preview</h2>
      <div id="preview-content"></div>
    </div>
  </div>
  
  <script type="module">
// Function to escape HTML entities for display
const escapeHtml = (html) => {
  return html
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
};

// Get DOM elements
const pasteArea = document.getElementById('paste-area');
const outputContainer = document.getElementById('output-container');
const htmlOutput = document.getElementById('html-output');
const previewContent = document.getElementById('preview-content');
const copyButton = document.getElementById('copy-button');
const clearButton = document.getElementById('clear-button');

// Handle paste event to capture HTML
pasteArea.addEventListener('paste', function(e) {
  // Let the paste happen normally first
  setTimeout(() => {
    // Get current HTML content after the paste
    const pastedContent = pasteArea.innerHTML;
    
    if (pastedContent) {
      // Display the HTML code with escaped characters
      htmlOutput.value = pastedContent;
      
      // Show the output container
      outputContainer.style.display = 'block';
      
      // Show preview of how the HTML renders
      previewContent.innerHTML = pastedContent;
      
      // Let user know paste was successful
      pasteArea.innerHTML = '<p style="color: green;">Content pasted. HTML extracted.</p>';
    }
  }, 0);
});

// Reset paste area when clicked
pasteArea.addEventListener('focus', function() {
  if (pasteArea.textContent.includes('Content pasted. HTML extracted.')) {
    pasteArea.innerHTML = '';
  }
});

// Copy HTML to clipboard
copyButton.addEventListener('click', function() {
  htmlOutput.select();
  document.execCommand('copy');
  
  const originalText = copyButton.textContent;
  copyButton.textContent = 'Copied!';
  setTimeout(() => {
    copyButton.textContent = originalText;
  }, 1500);
});

// Clear all content
clearButton.addEventListener('click', function() {
  pasteArea.innerHTML = '';
  htmlOutput.value = '';
  previewContent.innerHTML = '';
  outputContainer.style.display = 'none';
});
  </script>
</body>
</html>
